<template>
  <div class="all">
    <!-- 页头 -->
    <el-container class="allContainer">
      <el-header class="head">
        <div class="divHead"></div>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <div>
                <div class="topFont">公共资源管理</div>
              </div>
            </div>
          </el-col>
          <div class="divBtn">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="addDialog = true">新增</el-button>
            <!-- 添加 -->
            <el-dialog :visible.sync="addDialog" width="70%" :center="true" :show-close="false">
              <div slot="title">
                <el-header class="head">
                  <div class="divHead"></div>
                  <el-row>
                    <el-col :span="12">
                      <div class="grid-content bg-purple">
                        <div>
                          <div class="topFont">公共资源信息新增</div>
                        </div>
                      </div>
                    </el-col>
                    <div class="divBtn">
                      <template>
                        <el-button type="text">
                          <i class="el-icon-close bigClose" @click="addDialog = false"></i>
                        </el-button>
                      </template>
                    </div>
                  </el-row>
                </el-header>
              </div>
              <el-form :model="addForm" ref="addForm">
                <div>
                  <el-form-item label="公共资源名称：" :label-width="formLabelWidth" prop="publicresourceName">
                    <el-input style="width:200px" v-model="addForm.publicresourceName" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="容纳人数：" :label-width="formLabelWidth" prop="publicresourceNum">
                    <el-input v-model="addForm.publicresourceNum" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="资源编号：" :label-width="formLabelWidth" prop="publicresourceNumbering">
                    <el-input v-model="addForm.publicresourceNumbering" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="资源类型：" :label-width="formLabelWidth" prop="publicresourceType">
                    <el-select v-model="updateForm.publicresourceType" clearable placeholder="请选择">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="资源面积：" :label-width="formLabelWidth" prop="publicresourceArea">
                    <el-input v-model="addForm.publicresourceArea" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="出租单价：" :label-width="formLabelWidth" prop="publicresourcePrice">
                    <el-input v-model="addForm.publicresourcePrice" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="资源编号：" :label-width="formLabelWidth" prop="publicresourcePrice">
                    <el-input v-model="addForm.publicresourcePrice" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="资源标签：" :label-width="formLabelWidth" prop="publicresourceTag">
                    <el-input v-model="addForm.publicresourceTag" type="textarea" autosize autocomplete="off">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="资源展示图：" :label-width="formLabelWidth" prop="publicresourceExhibitresource">
                    <el-input v-model="addForm.publicresourceExhibitresource" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="户型图：" :label-width="formLabelWidth" prop="publicresourceImg">
                    <el-input v-model="addForm.publicresourceImg" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="资源地址：" :label-width="formLabelWidth" prop="publicresourceAddress">
                    <el-input v-model="addForm.publicresourceAddress" autocomplete="off"></el-input>
                  </el-form-item>
                </div>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="add">保 存</el-button>
                <el-button @click="addDialog = false">取 消</el-button>
              </div>
            </el-dialog>
            <el-button size="mini" type="warning" icon="el-icon-delete">批量删除</el-button>
          </div>
        </el-row>
      </el-header>
      <el-main class="bottomMain">
        <div class="divMain">
          <template>
            <!-- 模糊查询 -->
            <div class="mainTop">
              <div class="divInputAll">
                <!-- 输入框 -->
                <div class="divInput">
                  <div class="inputFont">公共资源名称：</div>
                  <div style="float:left;">
                    <el-input size="mini" placeholder="请输入公共资源名字" v-model="queryPublicResource.publicresourceName">
                    </el-input>
                  </div>
                </div>
                <div class="likeBtn">
                  <el-button size="mini" type="success" icon="el-icon-search" @click="loadPublicResource">查询</el-button>
                  <el-button size="mini" plain>重置</el-button>
                </div>
              </div>
            </div>
          </template>
          <!-- 查所有 -->
          <div class="divSelAll">
            <template>
              <el-table :data="publicResourceList" border style="width: 100%;font-size: xx-small;margin: auto;"
                :row-style="{ height: '22px' }" :cell-style="{ padding: '1px' }">
                <el-table-column fixed type="selection" prop="date" width="46">

                </el-table-column>
                <el-table-column fixed prop="publicresourceName" label="公共资源名称" width="150">
                </el-table-column>
                <el-table-column prop="publicresourceNum" label="容纳人数" width="100">
                </el-table-column>
                <el-table-column prop="publicresourceType" label="类型" width="100" :formatter="type">
                </el-table-column>
                <el-table-column prop="publicresourceNumbering" label="公共资源编号" width="110">
                </el-table-column>
                <el-table-column prop="publicresourceArea" label="建筑面积(m²)" width="110">
                </el-table-column>
                <el-table-column prop="publicresourcePrice" label="出租单价(天)" width="110">
                </el-table-column>
                <el-table-column prop="publicresourceTag" label="标签" width="150">
                </el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作" width="285">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleEdit(scope.row.publicresourceId)">详情
                    </el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.publicresourceId)">
                      <el-button type="text" size="small" slot="reference">删除</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 详情 -->
              <el-dialog :visible.sync="updateDialog" width="70%" :center="true" :show-close="false">
                <div slot="title">
                  <el-header class="head">
                    <div class="divHead"></div>
                    <el-row>
                      <el-col :span="12">
                        <div class="grid-content bg-purple">
                          <div class="topFont">公共资源详情</div>
                        </div>
                      </el-col>
                      <div class="divBtn">
                        <template>
                          <el-button type="text">
                            <i class="el-icon-close bigClose" @click="updateDialog = false"></i>
                          </el-button>
                        </template>
                      </div>
                    </el-row>
                  </el-header>
                </div>
                <el-form :model="updateForm" ref="updateForm">
                  <div>
                    <el-form-item label="公共资源名称：" :label-width="formLabelWidth" prop="publicresourceName">
                      <el-input style="width:200px" v-model="updateForm.publicresourceName" autocomplete="off">
                      </el-input>
                    </el-form-item>
                    <el-form-item label="容纳人数：" :label-width="formLabelWidth" prop="publicresourceNum">
                      <el-input v-model="updateForm.publicresourceNum" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="资源编号：" :label-width="formLabelWidth" prop="publicresourceNumbering">
                      <el-input v-model="updateForm.publicresourceNumbering" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="资源类型：" :label-width="formLabelWidth" prop="publicresourceType">
                      <el-select v-model="updateForm.publicresourceType" clearable placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="资源面积：" :label-width="formLabelWidth" prop="publicresourceArea">
                      <el-input v-model="updateForm.publicresourceArea" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="出租单价：" :label-width="formLabelWidth" prop="publicresourcePrice">
                      <el-input v-model="updateForm.publicresourcePrice" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="资源标签：" :label-width="formLabelWidth" prop="publicresourceTag">
                      <el-input v-model="updateForm.publicresourceTag" type="textarea" autosize autocomplete="off">
                      </el-input>
                    </el-form-item>
                    <el-form-item label="资源展示图：" :label-width="formLabelWidth" prop="publicresourceExhibitresource">
                      <el-input v-model="updateForm.publicresourceExhibitresource" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="户型图：" :label-width="formLabelWidth" prop="publicresourceImg">
                      <el-input v-model="updateForm.publicresourceImg" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="资源地址：" :label-width="formLabelWidth" prop="publicresourceAddress">
                      <el-input v-model="updateForm.publicresourceAddress" autocomplete="off"></el-input>
                    </el-form-item>
                  </div>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="update">保 存</el-button>
                  <el-button @click="updateDialog = false">取 消</el-button>
                </div>
              </el-dialog>
            </template>
          </div>
          <div class="divPage">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="queryPublicResource.currentPage" :page-sizes="[5, 10, 15, 20]"
              :page-size="queryPublicResource.pageSize" layout="total, sizes, prev, pager, next, jumper"
              :total="page.total">
            </el-pagination>
          </div>
        </div>
      </el-main>

    </el-container>

  </div>
</template>

<script scoped>
export default {
  data() {
    return {
      addDialog: false,
      addForm: {},
      updateDialog: false,
      updateForm: {},
      publicResourceList: [],
      formLabelWidth: "120px",
      page: {
        total: 0
      },
      queryPublicResource: {
        currentPage: 1,
        pageSize: 5,
        publicresourceName: ""
      },
      options: [{
        value: 1,
        label: '展厅'
      }, {
        value: 2,
        label: '会议室'
      }, {
        value: 3,
        label: '操场'
      }],
      value: ''
    };
  },
  methods: {
    loadPublicResource() {
      this.$axios.post("publicresource/queryAll", this.queryPublicResource)
        .then(res => {
          this.publicResourceList = res.data.data.list.list;
          this.page.total = res.data.data.list.total;
        })
    },
    add() {
      this.$axios.post("publicresource/", this.addForm)
        .then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功");
            this.addDialog = false;
            this.$refs.addForm.resetFields();
            this.loadPublicResource();
          }
        })
    },
    handleEdit(id) {
      this.$axios.post("publicresource/" + id).then(res => {
        this.updateDialog = true;
        this.updateForm = res.data.data.publicresource;
      });
    },
    update() {
      this.$axios.put("publicresource/", this.updateForm).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.updateDialog = false;
          this.$refs.updateForm.resetFields();
          this.loadPublicResource();
        }
      });
    },
    handleDelete(id) {
      this.$axios.delete("publicresource/" + id).then(res => {
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.loadPublicResource();
        }
      });
    },
    handleCurrentChange(val) {
      this.queryPublicResource.currentPage = val;
      this.loadPublicResource();
    },
    handleSizeChange(val) {
      this.queryPublicResource.pageSize = val;
      this.loadPublicResource();
    },
    type(row, column) {
      const publicresourceType = row.publicresourceType
      if (publicresourceType == 1) {
        return '展厅'
      } else if (publicresourceType == 2) {
        return '会议室'
      } else if (publicresourceType == 3) {
        return '操场'
      }
    },
  },
  mounted() {
    this.loadPublicResource();
  }
};
</script>
<style>
.all {
  width: 100%;
  height: 700px;
  background-color: rgb(240, 242, 245);
}

.allContainer {
  width: 98%;
  ;
  margin: auto;
}

.head {
  background-color: white;
  width: 100%;
  height: 10px;
  line-height: 60px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}

.divHead {
  background-color: cornflowerblue;
  width: 7px;
  height: 50%;
  float: left;
  margin-top: 15px;
  border-radius: 2px;
  margin-left: 8px;
}

.topFont {
  float: left;
  margin-left: 18px;
  font-size: 14px;
  font-weight: 900;
}

.divBtn {
  float: right;
  margin-right: 10px;
}

.bottomMain {
  border-radius: 8px;
  width: 100%;
  height: 620px;
  margin: auto;
  margin-top: 5px;
}

.divMain {
  width: 100%;
  height: 100%;
}

.mainTop {
  width: 100%;
  height: 13%;
  margin: auto;
  border: 1px solid darkgray;
  border-radius: 5px;
}

.divInputAll {
  background-color: white;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}

.divInput {
  height: 100%;
  line-height: 60px;
  margin-left: 30px;
  float: left;
}

.divSelect {
  width: 24.9%;
  height: 100%;
  line-height: 60px;
  margin-left: 30px;
  float: left;
}

.likeBtn {
  float: right;
  margin-right: 12px;
  line-height: 60px;
}

.inputFont {
  float: left;
  font-size: 2px;
}

.optionFont {
  float: right;
  color: #8492a6;
  font-size: xx-small;
}

.divSelAll {
  width: 100%;
  height: 75%;
  margin-top: 8px;
  line-height: 20px;
}

.divPage {
  width: 100%;
  height: 2%;
  margin-top: 20px;
  line-height: 10px;
}

.bigClose {
  font-size: large;
  font-weight: bolder;
}
</style>
